/* 整个页面 */
.PetCommonSense {
  background-color: #ffcc01;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 每一个内容卡片 */
.CommonSenseCard {
  width: 80vw;
  height: 177px;
  background-color: #fff;
  border-radius: 20px;
  margin: 10px 0;
  padding: 0 18px;
}
/* 每一个标题 */
.title {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  margin: 20px auto 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* 内容主体 */
/* 解决高度塌陷  将高度塌陷的元素  设置一个class名字叫 clearFix  这名字和ergou一个功能 */
.main::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.main {
  zoom: 1; /* 这个是啥作用呢  兼容低版本 */
  margin-bottom: 5px;
  display: flex;
  justify-content: space-around;
}
/* 内容左侧文字 */
.contents {
  width: 50vw;
  line-height: 20px;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
/* 内容右侧图片 */
.pic {
  width: 88px;
  height: 60px;
  background: pink;
  float: right;
}
/* 底部日期 */
.date {
  font-size: 12px;
  color: #b4b4b4;
}
